<template>
  <div id="app" ref="app">
    <title-vue></title-vue>
    <body-vue></body-vue>
  </div>
</template>

<script>
import title from "./views/Title.vue";
import body from "./views/Body.vue";
export default {
  name: "App",
  data() {
    return {
      subTitle: ""
    };
  },
  components: {
    "title-vue": title,
    "body-vue": body
  },
  mounted() {

    this.$toast('ss');
    
  }
};
</script>

<style>
@font-face {
  font-family: "wuming123";
  font-display: swap;
  src: url("//at.alicdn.com/t/webfont_y2a5zzwueel.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/webfont_y2a5zzwueel.woff") format("woff"),
    url("//at.alicdn.com/t/webfont_y2a5zzwueel.ttf") format("truetype");
}

html,
body,
div,
span,
p,
ol,
ul,
li,
table,
img,
input,
button,
textarea,
select,
svg {
  margin: 0;
  padding: 0;
  font-family: wuming123;
}

*::-webkit-scrollbar {
  width: 6px;
  background-color: rgba(0, 0, 0, 0);
}

*::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

html {
  height: 100%;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
body {
  height: 100%;
  width: 100%;
  color: rgb(245, 245, 245);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1);
}

button {
  cursor: pointer;
}

input,
textarea,
select {
  font-size: 0.875em;
  box-sizing: border-box;
  outline: none;
  background: none;
  border: none;
}

a {
  text-decoration: none;
}

svg {
  width: 100%;
  height: 100%;
}

table {
  border-collapse: collapse;
}

#app {
  height: 100%;
  overflow: hidden;
  background: #1a1a1a;
}

.flex {
  display: flex;
}

.mt-20 {
  margin-top: 20px;
}

.fade-enter-active,.fade-leave-active{
  transition: opacity .4s;
}

.fade-enter,.fade-leave-to{
  opacity: 0;
}

</style>
